<!-- 主列表页 -->
<template>
  <div>
    <!-- 搜索栏 -->
    <SearchBar @query="queryList" @reset="resetForm">
      <el-form-item label="搜索条件">
        <Input v-model.trim="searchData.name" />
      </el-form-item>
      <el-form-item label="启用状态">
        <Select v-model="searchData.state" :options="DISABLE"/>
      </el-form-item>
      <el-form-item label="查询时间">
        <DatePicker v-model="searchData.date" type="daterange" value-format="yyyy-MM-dd" />
      </el-form-item>
    </SearchBar>
    <!-- 按钮容器+导入 -->
    <ButtonImport api="https://jsonplaceholder.typicode.com/posts/" :data="{}" :fileSize="5" template="/xxx/xxx">
      <el-button type="primary" @click="edit('新增', null)">新 增</el-button>
      <el-button type="danger" @click="del()" :disabled="selectData.length === 0">删 除</el-button>
    </ButtonImport>
    <!-- 表格 -->
    <Table :handleWidth="210" :data="page.list" columnMark="tableKey-V1" :columns="tableColumns" @select="(list) => {selectData = list}">
      <template slot-scope="scope">
        <span class="table-handle c-primary" @click.stop="edit('详情', scope.row)">
          <i class="el-icon-more"></i>
          <span>详情</span>
        </span>
        <span class="table-handle c-primary" @click.stop="edit('编辑', scope.row)">
          <i class="el-icon-edit"></i>
          <span>编辑</span>
        </span>
        <span class="table-handle c-red" @click.stop="del(scope.row)">
          <i class="el-icon-delete"></i>
          <span>删除</span>
        </span>
      </template>
    </Table>
    <div>
      <!-- 导出 -->
      <ExportData :params="searchDataParams" :url="'/xxx/xxx'" :list="page.list" :select="selectData" />
      <!-- 分页 -->
      <Pagination @search="getList" :page="page" />
    </div>
    <!-- 新增+编辑 -->
    <Edit @callback="getList" :params="editParams" />
  </div>
</template>

<script>
import mixin from '@/mixin/index'
import Edit from './edit.vue'
import confirm from '@/components/dialog/confirm'
// import { methodGet, methodPost } from '@/api'
import { DISABLE, DISABLE_FN } from '@/constants/basic-data'
import { dateFormat } from '@/filters'

export default {
  mixins: [mixin],
  components: { Edit },
  data() {
    return {
      DISABLE,
      selectData: [], // 被选中的列表
      tableColumns: [
        {
          title: 'ID',
          key: 'id',
          show: false,
          width: 100
        },
        {
          title: '名称',
          key: 'name',
          show: true,
          width: 200
        },
        {
          title: '时间',
          key: 'time',
          show: true,
          width: 200,
          format: {
            method: dateFormat,
            params: 'YYYY-MM-DD HH:mm'
          }
        },
        {
          title: '状态',
          key: 'state',
          show: true,
          width: 100,
          format: {
            method: DISABLE_FN
          }
        },
        {
          title: '备注',
          key: 'remark',
          show: true
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 获取列表数据
     * 先调用mixin/index中的同名函数，再调用此函数
     */
    getList() {
      this.page.total = 4 // 总条数
      this.page.pageNum = 1 // 当前页
      this.page.pageSize = 5 // 每页多少条
      this.page.list = [
        {id: 1, name: 'name1', time: new Date(), state: 1, remark: ''},
        {id: 2, name: 'name2', time: new Date(), state: 0, remark: ''},
        {id: 3, name: 'name3', time: new Date(), state: 0, remark: ''},
        {id: 4, name: 'name4', time: new Date(), state: 1, remark: ''}
      ]
      /* this.searchDataParams.pageNum = this.page.pageNum
      this.searchDataParams.pageSize = this.page.pageSize
      methodGet('/xxx/xxx', this.searchDataParams).then(res => {
        if (res.code === 200) {
          this.page = res.result
        } else {
          this.$message.error(res.remark)
        }
      }) */
    },
    /**
     * 删除
     * @param {Object} row
     */
    del(row) {
      confirm('删除不可恢复，是否确定删除?', '确定删除', true).then(() => {
        /* methodPost('/xxx/xxx', {ids: []}).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功')
            this.getList()
          } else {
            this.$message.error(res.remark)
          }
        }) */
      }).catch(() => {})
    }
  }
}
</script>
